<template>
  <div class="swiper-i" v-if="swiperList.length" >
	  <!-- <uv-swiper :list="swiperList"  :autoplay="true" :current="currentNum"
      :circular="true"
	  radius="0"
	   interval="5000"
	   keyName="url"
	   imgMode="aspectFill"
	   height="100%"   circular  @change="e => currentNum = e.current" @click="clickSwiper">
			<template v-slot:indicator>
				<view class="indicator">
					<view class="indicator__dot" 
						v-for="(item, index) in swiperList" 
						:key="index" 
						:class="[index === currentNum && 'indicator__dot--active']"
						 @click="switchSwiper(index)"
					></view>
				</view>
			</template>
     </uv-swiper> -->
	<swiper class="swiper" circular :indicator-dots="true" indicator-color="rgba(140, 136, 137)" indicator-active-color="#ff9800" :autoplay="true" :interval="5000" :duration="500">
		<swiper-item v-for="(item,index) in swiperList" :key="index" @click="clickSwiper(index)">
			<image :src="item.url" class="swiper-img" mode="aspectFill">	
			</image> 
		</swiper-item>	 
	<!-- 	<swiper-item>
			<div class="swiper-img" style="background-color:aqua">		
			</div>
		</swiper-item>	 
		<swiper-item>
			<div class="swiper-img" style="background-color:#000">
				
			</div>
		</swiper-item>	
		<swiper-item>
			<div class="swiper-img" style="background-color:#fff">	
			</div>
		</swiper-item>	 -->
	</swiper>
  </div>
</template>

<script setup>
import { useUserStore } from "@/stores";
const userStore = useUserStore();
const { userId } = storeToRefs(userStore);
const props=defineProps({
	swiperList: {
	  type: Array,
	  default: () => [],
	},
	displayItems:{
		type:Number,
		default:1
	},
})
const currentNum=ref(0);
const clickSwiper=(i)=>{
	const {jumpType,path}=props.swiperList[i];
	if(jumpType=='MP'){
		//跳转小程序
		wx.navigateToMiniProgram({
		  appId: path,
		  path: '',
		  // extraData: {
		  //   foo: 'bar'
		  // },
		  //envVersion: 'develop',
		  success(res) {
		    // 打开成功
		  }
		})
	}
	if(jumpType=='PT'){
		//跳转富文本页面--id=xxx
		if(userId.value){
			uni.navigateTo({
				url:`/pages/subPackageA/pictureCardsDetail/index?id=${path}`
			})
		}else{
			uni.navigateTo({
				url:'/pages/subPackageA/login/index'
			})
		}
		 
	}
	 
}
const switchSwiper=(index)=>{
	currentNum.value=index;
}
</script>

<style lang="scss" scoped>
 
.swiper-i {
   
  .swiper{
  	 width: 100%;
  	 height: 554rpx;
	 .swiper-img{
		 width:100%;
		 height:100%;
	 }
  }
}
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.indicator {
		@include flex(row);
		justify-content: center;
		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(140, 136, 137);
			margin: 0 5px;
			transition: background-color 0.3s;
			&--active {
				background-color: #ff9800;
			}
		}
	}
  
</style>
